<template>
  <el-dialog 
    title="目录设置" 
    :visible.sync="dialogVisible" 
    width="500px"
    :before-close="handleCancelDialog" 
    v-dialogDrag
  >
      <div class="dialog-body">
        <el-form 
          :model="menuForm" 
          label-width="100px" 
          ref="menuForm"
          :rules="menuRule" 
        >
          <el-form-item label="上级目录" v-if="parentName != ''">
            <span>{{ parentName }}</span>
          </el-form-item>

          <el-form-item label="目录名称" required prop="treeName">
            <el-input 
            v-model="menuForm.treeName" 
            placeholder="请输入目录名称"
            prefix-icon="el-icon-edit"
            size="medium"
            class="name-input"
            maxlength="30"
            show-word-limit
            >
            </el-input>
            <div class="input-tip greyText">建议使用简洁明了的名称,最多30个字符</div>
          </el-form-item>
          
          <el-form-item label="是否最底层" required prop="iS_BOTTOM" v-if="hasBottom">
            <el-switch 
                v-model="menuForm.iS_BOTTOM" 
                active-color="#13ce66" 
                inactive-color="#999"  
                :active-value="1" 
                :inactive-value="0"
                class="custom-switch"
            ></el-switch>
            <div class="input-tip redText" v-if="menuForm.iS_BOTTOM">
                <i class="el-icon-info"></i>
                设置为最底层目录，不可再添加子菜单
            </div>
          </el-form-item>
        </el-form>
        </div>
    
    <div class="dialog-footer">
      <el-button 
        @click="handleCancelDialog" 
        size="small" 
        class="cancel-btn"
        icon="el-icon-circle-close"
      >
        取消
      </el-button>
      <el-button 
        type="primary" 
        @click="handleAddMenuSave" 
        size="small" 
        class="confirm-btn"
        icon="el-icon-circle-check"
      >
        保存配置
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
    name:'addMenu',
    props:{
        visible: {
            type: Boolean,
            default: false
        },
        menuForm:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        parentName:{
          type:String,
          default:''
        },
        hasBottom:{
          type:Boolean,
          default:false
        }
    },
    data() {
        return {
            dialogVisible: this.visible,
            menuRule:{
              treeName: [{required: true, message: '请输入目录名称'}],
              iS_BOTTOM: [{required: true, message: '请选择是否最底层'}],
            },
        }
    },
    watch: {
        visible(newVal) {
            this.dialogVisible = newVal;
        },
        dialogVisible(newVal) {
            this.$emit('update:visible', newVal);
        },
    },
    methods: {
        handleCancelDialog(){
          this.$refs['menuForm'].clearValidate()
          this.$emit('cancelMenu')
        },
        handleAddMenuSave(){
          this.$refs['menuForm'].validate((valid) => {
            if (valid) {
              this.$emit('saveMenu',this.menuForm)
            }else{
              return false;
            }
          })  
          
        }
    }
}
</script>

<style scoped lang="scss">
.form-item {
  margin-bottom: 0;
}

.input-tip {
  font-size: 12px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

</style>